<template>
    <div class="render3">
        {{ title }}

        <div v-if="editor" class="editor-shell">
            <EditorContent :editor="editor" class="editor-surface" />
        </div>
        <div class="button">
            <button @click="tojson">输出 json</button>
        </div>
        <div ref="measureHost" class="page-measure" aria-hidden="true"></div>
    </div>
</template>
<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import Document from "@tiptap/extension-document";
import Text from "@tiptap/extension-text";
// import Paragraph from './edtior/node/extendParagraph.js'
import Paragraph from './edtior/node/paragraphNode.js'
import DrawPlugin from './plugin/draw.js'

import docContent from './edtior/docContent.js'


export default {
    name: "render3",
    components: {
        EditorContent
    },
    data() {
        return {
            title: "render3",
            pageSize: {
                width: 620,
                height: 820,
            },
            pagePadding: {
                horizontal: 48,
                top: 40,
                bottom: 56,
            },
            content: docContent,
            editor: null,
            measureCtx: null,
            metrics: {
                fontSize: 14,
                lineHeight: 22.4,
                fontFamily: '"PingFang SC", "Microsoft YaHei", Arial, sans-serif',
                paragraphSpacing: 12,
                firstLineIndentEm: 2
            },
        };
    },
    mounted() {
        this.initEditor()
    },
    methods: {
        initEditor() {
            this.editor = new Editor({
                extensions: [Document, Paragraph, Text],
                content: this.content,
            });
            this.editor.registerPlugin(new DrawPlugin())
            this.editor.on('update', this.updatePages)
            this.ensureMeasureContext()
            this.$nextTick(this.updatePages)
        },
        ensureMeasureContext() {
            if (this.measureCtx) {
                return this.measureCtx
            }

            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            if (!ctx) {
                return null
            }

            ctx.font = `${this.metrics.fontSize}px ${this.metrics.fontFamily}`
            this.measureCtx = ctx
            return ctx
        },
        updatePages() {
            if (!this.editor) {
                this.pages = []
                return
            }
        },
        tojson() {
            console.log(this.editor.getJSON())
        }
    },
};
</script>
<style scoped lang="scss">
.render3 {
    padding: 16px;
    border: 1px solid #ccc;

    .editor-shell {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        padding: 12px;
        background: #fff;
        min-height: 300px;
    }
}

.render3-paragraph {
    position: relative;
}

.render3-paragraph__content {
    color: transparent;
}

.render3-paragraph__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
    white-space: pre-wrap;
}

.render3-paragraph__line {
    display: block;
    white-space: pre-wrap;
}

.page-measure {
    position: absolute;
    left: -9999px;
    top: 0;
    visibility: hidden;
}
</style>
